<template>
  <div class="Page Confirm">
    <div class="Title">
      <h1 class="fl f18">订单确认</h1>
      <div class="clear" />
    </div>
    <table class="GoodList">
      <tbody>
        <tr>
          <td colspan="3" class="teacher">讲师：{{ order.teacherName }}</td>
        </tr>
        <tr class="good">
          <td class="name First">
            <a
              :href="'http://localhost:8888/course/' + order.courseId"
              target="_blank"
            >
              <img :src="order.courseCover" />
            </a>
            <div class="goodInfo">
              <a
                :href="'http://localhost:8888/course/' + order.courseId"
                target="_blank"
                >{{ order.courseTitle }}</a
              >
            </div>
          </td>
          <td class="red priceNew Last">
            ￥<strong>{{ order.totalFee / 100 }}</strong>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="Finish">
      <div class="check fr">
        <el-checkbox v-model="agree"
          >我已阅读并同意<a href="javascript:" target="_blank"
            >《谷粒学院购买协议》</a
          ></el-checkbox
        >
      </div>
      <div class="clear" />
      <div class="Main fl">
        <div class="fl">
          <a :href="'/course/' + order.courseId">返回课程详情页</a>
        </div>
      </div>
      <el-button :disabled="!agree" type="danger" @click="buyCourse"
        >去支付
        <!-- <a :href="'http://localhost:8180/api/auth/order/pay/' + order.id"
          >去支付</a
        >-->
      </el-button>
    </div>
  </div>
</template>

<script>
import order from "../../api/order";

export default {
  data() {
    return {
      order: {},
      agree: true,
    };
  },
  mounted() {},
  created() {
    order.getOrderById(this.$route.params.id).then((resp) => {
      if (resp) {
        this.order = resp.data.item;
      }
    });
  },
  methods: {
    buyCourse() {
      this.$confirm("即将转到支付宝支付界面", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          order.buy2(this.order.id).then((resp) => {
            if (resp) {
              const div = document.createElement("divpay");
              div.innerHTML = resp.data.body;
              document.body.appendChild(div);
              document.forms[1].submit();
            }
          });
        })
        .catch(() => {
          this.$message.alert({
            type: "info",
            message: "已取消支付",
          });
        });
    },
  },
};
</script>
